﻿@model ArticleWithComments
@{
    ViewData["Title"] = "文章";
}
@section PYhead{
    <link href="~/css/Article.css" type="text/css" rel="stylesheet">
    <style>
        .itm-son-r {
            color: black;
        }
    </style>
}
<div id="topbar-ar">
    <p class="artop-item" style="right:0;left:0;">文章</p>
    <p class="artop-item" style="margin-left:20px;"><a asp-action="ArticleIndex" asp-controller="Articles">&#60;</a></p>
    <partial name="_LoginPartical" />
</div>
<div id="main">

    <div id="Article-Area">
        <div id="top-inf">
            <p class="title">@Model.article.Title</p>
            <div id="Uploder">
                <div id="headpic-father">
                    <img class="headpic" src="/Account/GetUserHead/@Model.article.UId" alt="头像" />
                </div>
                <ul class="up-inf">
                    <li class="name">@Model.UserName</li>
                    <li class="level">创作</li>
                </ul>
            </div>
        </div>
        <div class="ar-content" id="ar-content">

        </div>
        <div class="ar-down">
            <div class="ar-down-btn"><a onclick="replya(this,0,0)" style="cursor:pointer;">回复</a></div>
            @if (Model.Liked == 1)
            {
                <div class="ar-down-btn" style="cursor:pointer;">已赞 @Model.article.LikeNumber</div>
            }
            else
            {
                <div class="ar-down-btn" style="cursor:pointer;"><a onclick="Alike(@Model.article.AId)">点赞</a></div>
            }
        </div>
    </div>
    <div id="comment-area">
        @foreach (var u in Model.articleComments)
        {
            <div class="comments">
                <div style="display:inline-flex">
                    <img class="headpic-min" src="/Account/GetUserHead/@u.comment.UId" alt="头像" />
                    <p class="com-name">@u.comment.UName</p>
                </div>
                <p class="com-con">@u.comment.Content</p>
                <br />
                <div class="com-down">
                    <ul style="list-style: none;display: block;">
                        <li class="com-down-l"></li>
                        <li class="com-down-l"></li>
                        <li class="com-down-r"><img class="com-down-r-img" src="~/PIC/comment.svg" onclick="replyb(this,@u.comment.CId)"></li>
                        @if (u.comment.Liked == 0)
                        {
                            <li class="com-down-r"><a onclick="Clike(@u.comment.CId)"><img class="com-down-r-img" src="~/PIC/like.svg"></a></li>
                        }
                        else
                        {
                            <li class="com-down-r">@u.comment.LikeNumber</li>
                            <li class="com-down-r" style="margin-right:0;"><a><img class="com-down-r-img" src="~/PIC/liked.svg"></a></li>
                        }

                    </ul>
                </div>
                
                <ul class="subcomm">
                    @foreach (var v in u.subcomments)
                    {
                        <li class="subcomm-son">
                            <img class="minipic" src="/Account/GetUserHead/@v.UId" alt="头像" />
                            @if (v.Type == 1)
                            {
                                <span class="subcontent"><a class="usern">@v.UName</a>:@v.Content</span>
                                <div class="sub-down"><a class="subrep" onclick="replyc(this,@u.comment.CId,'@v.UName')">回复</a></div>
                            }
                            else
                            {
                                <span class="subcontent"><a class="usern">@v.UName</a>&nbsp回复&nbsp<a class="usern">@v.TargetName</a>:@v.Content</span>
                                <div class="sub-down"><a class="subrep" onclick="replyc(this,@u.comment.CId,'@v.UName')">回复</a></div>
                            }
                        </li>
                    }
                </ul>
            </div>
        }
    </div>
</div>
<script>
    var s = "@Model.article.Content";
    s = s.replace(/\[b\]/g, "<b>");
    s = s.replace(/\[\/b\]/g, "</b>");
    s = s.replace(/\[strike\]/g, "<strike>");
    s = s.replace(/\[\/strike\]/g, "</strike>");
    s = s.replace(/\[u\]/g, "<u>");
    s = s.replace(/\[\/u\]/g, "</u>");
    s = s.replace(/\[i\]/g, "<i>");
    s = s.replace(/\[\/i\]/g, "</i>");
    s = s.replace(/\[div\]/g, "<div>");
    s = s.replace(/\[\/div\]/g, "</div>");
    s = s.replace(/\[br\]/g, "<br>");
    s = s.replace(/\[\/br\]/g, "</br>");
    s = s.replace(/\[space\]/g, "&nbsp;");
    var imgs = /\[img\](.+?)\[\/img\]/g;
    var s2 = s.match(imgs);
    if (s2 != null) {
        s2.forEach(function (value, index, array) {
            var tmp = array[index];
            tmp = tmp.replace(/\[img\]/g, "");
            tmp = tmp.replace(/\[\/img\]/g, "");
            s = s.replace(array[index], "<img class=\"standardpic\" src=\"" + tmp + "\">");
        });
    }
    document.getElementById("ar-content").innerHTML = s;

    var aid =@Model.article.AId;
    var Cid = 0;
    var TargetName = "NULL";
    var Content = "NULL";
    var Type = 0;

    function replya(t,CId, targetName) {
        Cid = CId;
        TargetName = targetName;
        Type = 0;
        if ($(".reply-part").length != 0) {
            $(".reply-part").slideUp();
            $(".reply-part").remove();
        }
        $("#comment-area").prepend("<div style=\"display:none;\" class=\"reply-part\"><div id=\"reply-content\"  class=\"comm-editor\" contenteditable></div><button class=\"comm-editor-sub\" onclick=\"EditorPost()\">发表</button></div>");
        $(".reply-part").slideDown();
    }
    function replyb(t,CId) {
        Cid = CId;
        TargetName = "NULL";
        Type = 1;
        if ($(".reply-part").length != 0) {
            $(".reply-part").slideUp();
            $(".reply-part").remove();
        }
        var obj = $(t).parent().parent().parent().parent();
        obj.append("<div style=\"display:none;\" class=\"reply-part\"><div id=\"reply-content\" class=\"comm-editor\" contenteditable></div><button class=\"comm-editor-sub\" onclick=\"EditorPost()\">发表</button></div>");
        $(".reply-part").slideDown();
    }
    function replyc(t,CId,targetName) {
        Cid = CId;
        TargetName = targetName;
        Type = 2;
        if ($(".reply-part").length != 0) {
            $(".reply-part").slideUp();
            $(".reply-part").remove();
        }
        var obj = $(t).parent().parent().parent();
        obj.append("<li><div style=\"display:none;\" class=\"reply-part\"><div id=\"reply-content\" class=\"comm-editor\" contenteditable></div><button class=\"comm-editor-sub\" onclick=\"EditorPost()\">发表</button></div></li>");
        $(".reply-part").slideDown();
    }

    function EditorPost() {
        var s1 = document.getElementById("reply-content").innerHTML;
        s1 = s1.replace(/<b>/g, "[b]");
        s1 = s1.replace(/<\/b>/g, "[/b]");
        s1 = s1.replace(/<i>/g, "[i]");
        s1 = s1.replace(/<\/i>/g, "[/i]");
        s1 = s1.replace(/<strike>/g, "[strike]");
        s1 = s1.replace(/<\/strike>/g, "[/strike]");
        s1 = s1.replace(/<u>/g, "[u]");
        s1 = s1.replace(/<\/u>/g, "[/u]");
        s1 = s1.replace(/<div>/g, "[div]");
        s1 = s1.replace(/<\/div>/g, "[/div]");
        s1 = s1.replace(/<br>/g, "[br]");
        s1 = s1.replace(/<\/br>/g, "[/br]");
        s1 = s1.replace(/&nbsp;/g, "[space]");
        $.ajax({
            url: "/Articles/Comment",
            async: false,
            data: {
                Aid: aid,
                Type: Type,
                TargetId: Cid,
                Content: s1,
                TargetName: TargetName
            },
            type: "post",
            dataType: "text",
            async: true,
            success: function (response) {
                window.location.reload()
            }
        });
    }

    $('ul').each(
        function () {
            if (!$(this).has('li').length)
                $(this).remove();
        }
    );

    $('#comment-area').each(
        function () {
            if (!$(this).has('div').length) {
                $(this).append("<h1 style=\"text-align: center;\">看看下面~来发评论吧^v^</h1>");
                $("#comment-area").prepend("<div id=\"reply-content\" class=\"reply-part\"><div class=\"comm-editor\" contenteditable></div><button class=\"comm-editor-sub\" onclick=\"EditorPost()\">发表</button></div>")
            }

        }
    );

    $('.com-con').each(
        function () {
            var s = $(this).html();
            s = s.replace(/\[b\]/g, "<b>");
            s = s.replace(/\[\/b\]/g, "</b>");
            s = s.replace(/\[strike\]/g, "<strike>");
            s = s.replace(/\[\/strike\]/g, "</strike>");
            s = s.replace(/\[u\]/g, "<u>");
            s = s.replace(/\[\/u\]/g, "</u>");
            s = s.replace(/\[i\]/g, "<i>");
            s = s.replace(/\[\/i\]/g, "</i>");
            s = s.replace(/\[div\]/g, "<div>");
            s = s.replace(/\[\/div\]/g, "</div>");
            s = s.replace(/\[br\]/g, "<br>");
            s = s.replace(/\[\/br\]/g, "</br>");
            s = s.replace(/\[space\]/g, "&nbsp;");
            $(this).html(s);
        }
    );

    $('.subcontent').each(
        function () {
            var s = $(this).html();
            s = s.replace(/\[b\]/g, "<b>");
            s = s.replace(/\[\/b\]/g, "</b>");
            s = s.replace(/\[strike\]/g, "<strike>");
            s = s.replace(/\[\/strike\]/g, "</strike>");
            s = s.replace(/\[u\]/g, "<u>");
            s = s.replace(/\[\/u\]/g, "</u>");
            s = s.replace(/\[i\]/g, "<i>");
            s = s.replace(/\[\/i\]/g, "</i>");
            s = s.replace(/\[div\]/g, "<div>");
            s = s.replace(/\[\/div\]/g, "</div>");
            s = s.replace(/\[br\]/g, "<br>");
            s = s.replace(/\[\/br\]/g, "</br>");
            s = s.replace(/\[space\]/g, "&nbsp;");
            $(this).html(s);
        }
    );

    function Clike(CId) {
        $.ajax({
            url: "/Articles/CommentLike",
            async: false,
            data: {
                Cid: CId
            },
            type: "post",
            dataType: "text",
            async: true,
            success: function (response) {
                window.location.reload()
            }
        });
    }

    function Alike(AId) {
        $.ajax({
            url: "/Articles/ArticleLike",
            async: false,
            data: {
                Aid: AId
            },
            type: "post",
            dataType: "text",
            async: true,
            success: function (response) {
                window.location.reload()
            }
        });
    }

</script>